import React, { useEffect, useId } from 'react'
import { HashRouter as Router, Route, Routes } from 'react-router-dom'
import { connect } from 'react-redux'
import { connectSocketIo } from '@/utils/wss'

import Home from './pages/Home'
import JoinRoom from './pages/JoinRoom'
import VideoRoom from './pages/VideoRoom'

function App({
  userId
}) {
  useEffect(() => {
    /* 初始化body高度 */
    document.querySelector('body').style.setProperty('--screen-height', `${ document.documentElement.clientHeight }px`)
    window.userStreamMap = {}

    connectSocketIo()
  }, [])

  useEffect(() => {
    console.log('userId改变', userId)
  }, [useId])
  return userId && (
    <Router>
      <Routes>
        <Route
          element={<Home />}
          path="/"/>
        <Route
          element={<JoinRoom />}
          path="/join-room/:role"
        />
        <Route
          element={<VideoRoom />}
          path="/room/:roomId"
        />
      </Routes>
    </Router>
  )
}
const mapStateToProps = (state) => ({ ...state })

export default connect(mapStateToProps)(App)
